body {
    margin: 40px;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, [col] 150px);
    grid-template-rows: repeat(2, [row] auto);
    background-color: #fff;
    color: #444;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

}

.box .box {
    background-color: #ccc;
    color: #444;
}

.a {
    grid-column: col / span 2;
    grid-row: row;
}

.b {
    grid-column: col 3 / span 2;
    grid-row: row;
}

.c {
    grid-column: col / span 2;
    grid-row: row 2;
}

.d {
    grid-column: col 3 / span 2;
    grid-row: row 2;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

.e {
    grid-column: 1 / 3;
    grid-row: 1;
}

.f {
    grid-column: 1;
    grid-row: 2;
}

.g {
    grid-column: 2;
    grid-row: 2;
}